<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<div class="input-label-container">
  <label
    [attr.aria-label]="accessibleLabel"
    class="input-label"
    *ngIf="label"
    [attr.for]="id"
    >{{ label }}</label
  >
</div>
<div
  class="input-container"
  [class.has-icon]="icon">
  <ng-content></ng-content>
  <tui-svg
    *ngIf="icon && !isPassword"
    class="icon"
    [src]="icon"></tui-svg>

  <button
    [tabindex]="passwordVisibilityTabIndex"
    class="password-visibility"
    *ngIf="isPassword"
    [title]="
      (passwordVisible ? 'auth.password.hide' : 'auth.password.show')
        | transloco
    "
    [attr.aria-label]="
      (passwordVisible ? 'auth.password.hide' : 'auth.password.show')
        | transloco
    "
    tuiLink
    type="button"
    [attr.aria-pressed]="passwordVisible ? true : false"
    (click)="togglePasswordVisibility()">
    <tui-svg [src]="icon"></tui-svg>
  </button>
</div>
<div class="extra-info">
  <ng-content select="[inputError]"></ng-content>
  <ng-content select="[adjacentLabelContent]"></ng-content>
</div>
<ng-content select="[passwordStrength]"></ng-content>
